<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>WLED像素艺术转换器</title>
    <link rel="stylesheet" href="pixart.css">
    <link rel="shortcut icon" href="favicon-16x16.png">
    <script type="text/javascript">
      var d = document;
      function gId(e) {return d.getElementById(e);}
      function cE(e) {return d.createElement(e);}
    </script>
  </head>
  <body>
    <body>
      <div class="top-part" >
        <div style="display: flex; justify-content: center;">
          <h1 style="display: flex; align-items: center;">
            <svg style="width:36px;height:36px;margin-right:6px;" viewBox="0 0 32 32">
              <rect style="fill:#003FFF" x="6" y="22" width="8" height="4"/>
              <rect style="fill:#003FFF" x="14" y="14" width="4" height="8"/>
              <rect style="fill:#003FFF" x="18" y="10" width="4" height="8"/>
              <rect style="fill:#003FFF" x="22" y="6" width="8" height="4"/>
            </svg>
            WLED像素艺术转换器
          </h1>
        </div>
        <h2>把图片转换成WLED JSON格式（WLED矩阵屏的像素艺术）</h2>
        <p>
          <table id="fieldTable"  style="width: 100%; table-layout: fixed; align-content: center;">
            <tr>
              <td style="vertical-align: middle;">
                <label for="ledSetupSelector">Led配置：</label>
              </td>
              <td class="adaptiveTD">
                <select id="ledSetupSelector" class="mainSelector">
                  <option value="matrix" selected>2D矩阵屏</option>
                  <option value="r2l">蛇形，第一排从右向左 &lt;-</option>
                  <option value="l2r">蛇形，第一排从左向右 -&gt;</option>
                </select>
              </td>
            </tr>        
            <tr>
              <td style="vertical-align: middle;">
                <label for="formatSelector">输出格式：</label>
              </td>
              <td class="adaptiveTD">
                <select id="formatSelector" class="mainSelector">
                  <option value="wled" selected>WLED JSON</option>
                  <option value="curl">CURL</option>
                  <option value="ha">Home Assistant YAML</option>
                </select>
              </td>
            </tr>        
            <tr>
              <td style="vertical-align: middle;">
                <label for="colorFormatSelector">颜色代码格式：</label>
              </td>
              <td class="adaptiveTD">
                <select id="colorFormatSelector" class="mainSelector">
                  <option value="hex" selected>HEX (&quot;f4f4f4&quot;)</option>
                  <option value="dec">DEC (244,244,244)</option>
                </select>
            </td>
            </tr>
            <tr>
              <td style="vertical-align: middle;">
                <label for="addressingSelector">寻址：</label>
              </td>
              <td class="adaptiveTD">
                <select id="addressingSelector" class="mainSelector">
                  <option value="hybrid" selected>Hybrid (&quot;f0f0f0&quot;,10, 17, &quot;f4f4f4&quot;)</option>
                  <option value="range">Range (10, 17, &quot;f4f4f4&quot;)</option>
                  <option value="single">Single (&quot;f4f4f4&quot;)</option>
                </select>
              </td>
            </tr>
            <tr>
              <td style="vertical-align: middle;">
                <label for="brightnessNumber">亮度：</label>
              </td>
              <td style="vertical-align: middle; display: flex; align-items: center;">
                <input type="range" id="brightnessNumber" min="1" max="255" value="128">
                <span id="brightnessValue">128</span>
              </td>
            </tr>
            <tr>
              <td style="vertical-align: middle;">
                <label for="colorLimitNumber">最大颜色数/JSON：</label>
              </td>
              <td style="vertical-align: middle; display: flex; align-items: center;">
                <input type="range" id="colorLimitNumber" min="1" max="512" value="256">
                <span id="colorLimitValue" >256</span>
              </td>
            </tr>
            <tr class="ha-hide">
              <td style="vertical-align: middle;">
                <label for="haID">HA设备ID:</label>
              </td>
              <td class="adaptiveTD">
                <input class="fullTextField" type="text" id="haID" value="pixel_art_controller_001">
              </td>
            </tr>
            <tr class="ha-hide">
              <td style="vertical-align: middle;">
                <label for="haUID">HA设备唯一ID：</label>
              </td>
              <td class="adaptiveTD">
                <input class="fullTextField" type="text" id="haUID" value="pixel_art_controller_001a">
              </td>
            </tr>
            <tr class="ha-hide">
              <td style="vertical-align: middle;">
                <label for="haName">HA设备名称：</label>
              </td>
              <td class="adaptiveTD">
                <input class="fullTextField" type="text" id="haName" value="Pixel Art Kitchen">
              </td>
            </tr>
            <tr>
              <td style="vertical-align: middle;">
                <label for="curlUrl">设备IP/主机名：</label>
              </td>
              <td class="adaptiveTD">
                <input class="fullTextField" type="text" id="curlUrl" value="">
              </td>
            </tr>
            <tr>
              <td style="vertical-align: middle;">
                <label for="targetSegment">目标片段ID：</label>
              </td>
              <td class="adaptiveTD">
                <input class="flxTFld" type="number" id="segID" value="0" min="0" max="63">
                <select id="targetSegment" class="adaptiveSelector">
                </select>
                <div id="getSegmentsDiv" class="segmentsDiv"></div>
              </td>
            </tr>
          </table>
          <table  class= "scaleTableClass" id="scaleTable"  style="width: 100%; table-layout: fixed; align-content: center;">
            <tr>
              <td style="vertical-align: middle;">
                <div id="scaleDiv">
                  <svg id="scaleToggle" style="width:36px;height:36px; cursor: pointer;" viewBox="0 0 24 24" onclick="switchScale()">
                    <path id="scaleTogglePath" fill="currentColor" d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" />
                  </svg>
                   &nbsp;图片比例
                </div>
              </td>
              <td style="vertical-align: middle;">
                <div id="sizeDiv" style="display: none;">
                  <label for="sizeX">宽 : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeX" min="1" value="16">
                  &nbsp;&nbsp;&nbsp;
                  <label for="sizeY">高 : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeY" min="1" value="16">
                </div>
              </td>
            </tr>
          </table>
        </p>
  
        <p>
          <label for="file-picker">
            <div id="drop-zone">    
              拖放图片文件到这里<br>或者<br>
                点击选择一个文件
            </div>
          </label>
        </p>
        
        <p>
          <input type="file" id="file-picker" style="display: none;">
          <div style="width: 100%; text-align: center;">
            <img id="preview" style="display: none; margin: 0 auto;">
          </div>
          <!--
          <div id="submitConvertDiv" style="display: none;">
            <button id="convertbutton" class="buttonclass"></button>
          </div>
          -->
          <div id="raw-image-container" style="display: none">
            <img id="image" src="" alt="RawImage image">
          </div>
          
        </p>
        
        <div id="image-container" style="display: none;">
          <div id="image-info" style="display: none"></div>
          <textarea id="JSONled" readonly></textarea>
        </div>
  
        <div id="button-container" style="display: none;">
          <button id="copyJSONledbutton" class="buttonclass"></button>
          <div id="gap1" class="gap"></div>
          <button id="sendJSONledbutton" class="buttonclass"></button>
        </div>
        <div>
          <h3><div id="version">Version 1.0.8</div>&nbsp;-&nbsp; <a href="https://github.com/werkstrom/WLED-PixelArtConverter/blob/main/README.md" target="_blank">帮助/关于</a></h3>
        </div>
      </div>
      <div id=bottom-part style="display: none" class=bottom-part></div>
            <canvas id="pixelCanvas"></canvas>
      </div>
      <script src="statics.js" type="text/javascript"></script>
      <script src="getPixelValues.js" type="text/javascript"></script>
      <script src="boxdraw.js" type="text/javascript"></script>
      <script src="pixart.js" type="text/javascript"></script>
  </body>
</html>